<!DOCTYPE html>
<html lang="zh">

<head>
    <title>多变字体</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/w3.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">
    <style type="text/css">
    html, body, h1, h2, h3, h4, h5, h6 {
        font-family: "segoe script";
    }
    .w3-tangerine {
        font-family: "Tangerine", serif;
    }
    </style>
<body>

<div class="w3-container">
    <h1>&lt;H&gt;</h1>
    <h1>Heading 1 (36px)</h1>
    <h2>Heading 2 (30px)</h2>
    <h3>Heading 3 (24px)</h3>
    <h4>Heading 4 (20px)</h4>
    <h5>Heading 5 (18px)</h5>
    <h6>Heading 6 (16px)</h6>

    <hr/>
    <h1>&lt;DIV&gt;</h1>
    <div class="w3-tiny">w3-tiny</div>
    <div class="w3-small">w3-small</div>
    <div class="w3-medium">w3-medium (Default)</div>
    <div class="w3-large">w3-large</div>
    <div class="w3-xlarge">w3-xlarge</div>
    <div class="w3-xxlarge">w3-xxlarge</div>
    <div class="w3-xxxlarge">w3-xxxlarge</div>
    <div class="w3-jumbo">w3-jumbo</div>
    
    <hr/>
    <h1>&lt;外部字体&gt;</h1>
    <header>
        谷哥字体：<a href="https://fonts.google.com/" target="_blank">https://fonts.google.com/</a>
    </header>
    <div class="w3-tangerine">
        <p class="w3-xxlarge">Making the Web Beautiful!</p>
        <p class="w3-xxxlarge">Making the Web Beautiful!</p>
        <p class="w3-jumbo">Making the Web Beautiful!</p>
    </div>
</div>
</body>

</html>